<template>
	<view class="container">
		<!-- 标题栏 -->
		<view class="header">
			<text class="title">用电总览</text>
			<text class="subtitle">实时监控·智能分析</text>
		</view>

		<!-- 数据概览卡片组 -->
		<view class="overview-cards">
			<view class="main-card">
				<view class="card-header">
					<text class="card-title">年累计用电量</text>
					<text class="card-unit">KWH</text>
				</view>
				<text class="main-value">{{ yearlyTotal.toLocaleString() }}</text>
				<view class="trend-info">
					<text class="trend-text">同比去年</text>
					<text :class="yearTrendClass">{{ yearTrend }}</text>
				</view>
			</view>

			<view class="sub-cards">
				<view class="sub-card production">
					<text class="sub-title">生产用电</text>
					<text class="sub-value">{{ productionPower.toLocaleString() }}</text>
					<text class="sub-unit">KWH</text>
				</view>
				<view class="sub-card non-production">
					<text class="sub-title">非生产用电</text>
					<text class="sub-value">{{ nonProductionPower.toLocaleString() }}</text>
					<text class="sub-unit">KWH</text>
				</view>
				<view class="sub-card auxiliary">
					<text class="sub-title">辅助用电</text>
					<text class="sub-value">{{ auxiliaryPower.toLocaleString() }}</text>
					<text class="sub-unit">KWH</text>
				</view>
			</view>

			<!-- 环保数据 -->
			<view class="env-card">
				<view class="env-icon">🌱</view>
				<view class="env-content">
					<text class="env-title">年累计碳排放量</text>
					<text class="env-value">{{ carbonEmission }} KG</text>
				</view>
				<view class="env-badge">低碳</view>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="chart-section">
			<view class="chart-header">
				<text class="chart-title">月度用电趋势</text>
				<text class="chart-period">{{ currentYear }}年</text>
			</view>
			<uni-chart class="chart" :option="opt" />
			<view class="chart-legend">
				<view class="legend-item production">
					<view class="legend-dot"></view>
					<text class="legend-text">生产用电</text>
				</view>
				<view class="legend-item non-production">
					<view class="legend-dot"></view>
					<text class="legend-text">非生产用电</text>
				</view>
				<view class="legend-item auxiliary">
					<view class="legend-dot"></view>
					<text class="legend-text">辅助用电</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentYear: new Date().getFullYear(),
				yearlyTotal: 0,
				productionPower: 0,
				nonProductionPower: 0,
				auxiliaryPower: 0,
				carbonEmission: 0,
				yearTrend: '+12.5%',
				yearTrendClass: 'trend-positive',
				opt: {
					title: {
						show: false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: 'rgba(0,122,255,0.1)'
							}
						},
						confine: true,
						backgroundColor: 'rgba(255,255,255,0.95)',
						borderColor: '#E5E5E5',
						borderWidth: 1,
						textStyle: {
							color: '#333'
						}
					},
					legend: {
						show: false
					},
					grid: {
						left: '5%',
						right: '5%',
						top: '10%',
						bottom: '15%'
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisLabel: {
							color: '#666',
							fontSize: 10
						},
						axisLine: {
							lineStyle: {
								color: '#E5E5E5'
							}
						}
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							color: '#666',
							fontSize: 10,
							formatter: '{value}'
						},
						axisLine: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: '#F0F0F0',
								type: 'dashed'
							}
						}
					}],
					series: [
						{
							name: '生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#007AFF',
							data: []
						},
						{
							name: '非生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#34C759',
							data: []
						},
						{
							name: '辅助生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#FF9500',
							data: []
						}
					]
				}
			}
		},
		onLoad() {
			this.initData();
		},
		methods: {
			// 初始化数据
			initData() {
				this.generateOverviewData();
				this.generateChartData();
			},
			
			// 生成概览数据
			generateOverviewData() {
				// 模拟年度数据
				this.productionPower = 45000 + Math.floor(Math.random() * 10000);
				this.nonProductionPower = 25000 + Math.floor(Math.random() * 5000);
				this.auxiliaryPower = 18000 + Math.floor(Math.random() * 4000);
				this.yearlyTotal = this.productionPower + this.nonProductionPower + this.auxiliaryPower;
				
				// 计算碳排放量 (每度电约0.5272kg二氧化碳)
				this.carbonEmission = Math.round(this.yearlyTotal * 0.5272);
				
				// 随机生成趋势
				const isPositive = Math.random() > 0.3;
				const trendValue = (Math.random() * 20 + 1).toFixed(1);
				this.yearTrend = `${isPositive ? '+' : '-'}${trendValue}%`;
				this.yearTrendClass = isPositive ? 'trend-positive' : 'trend-negative';
			},
			
			// 生成图表数据
			generateChartData() {
				const currentYear = this.currentYear;
				const monthNames = [];
				const productionData = [];
				const nonProductionData = [];
				const auxiliaryData = [];
				
				// 生成前7个月的数据
				for (let i = 6; i >= 0; i--) {
					const date = new Date();
					date.setMonth(date.getMonth() - i);
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					monthNames.push(`${year}${month}`);
					
					// 根据月份生成数据
					const baseSeed = year * 100 + parseInt(month);
					const production = Math.floor(2800 + (baseSeed % 100) * 15 + Math.random() * 800);
					const nonProduction = Math.floor(1500 + (baseSeed % 50) * 20 + Math.random() * 600);
					const auxiliary = Math.floor(1200 + (baseSeed % 80) * 10 + Math.random() * 400);
					
					productionData.push(production);
					nonProductionData.push(nonProduction);
					auxiliaryData.push(auxiliary);
				}
				
				// 更新图表数据
				this.opt.xAxis[0].data = monthNames;
				this.opt.series[0].data = productionData;
				this.opt.series[1].data = nonProductionData;
				this.opt.series[2].data = auxiliaryData;
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	/* 标题栏 */
	.header {
		text-align: center;
		margin-bottom: 40rpx;
		padding: 30rpx 0;
	}

	.title {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: #1a1a1a;
		margin-bottom: 10rpx;
	}

	.subtitle {
		display: block;
		font-size: 28rpx;
		color: #666;
		opacity: 0.8;
	}

	/* 数据概览卡片组 */
	.overview-cards {
		margin-bottom: 30rpx;
	}

	.main-card {
		padding: 40rpx 30rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.3);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		font-weight: 500;
	}

	.card-unit {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.7);
		background: rgba(255, 255, 255, 0.2);
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
	}

	.main-value {
		display: block;
		font-size: 72rpx;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 15rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.trend-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.trend-text {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.trend-positive {
		font-size: 32rpx;
		font-weight: 600;
		color: #4ade80;
	}

	.trend-negative {
		font-size: 32rpx;
		font-weight: 600;
		color: #f87171;
	}

	/* 子卡片组 */
	.sub-cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.sub-card {
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		text-align: center;
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.sub-card.production {
		background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
	}

	.sub-card.non-production {
		background: linear-gradient(135deg, #34C759 0%, #248A3D 100%);
	}

	.sub-card.auxiliary {
		background: linear-gradient(135deg, #FF9500 0%, #CC7700 100%);
	}

	.sub-title {
		display: block;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 12rpx;
	}

	.sub-value {
		display: block;
		font-size: 36rpx;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	.sub-unit {
		display: block;
		font-size: 20rpx;
		color: rgba(255, 255, 255, 0.7);
	}

	/* 环保数据卡片 */
	.env-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
		border-radius: 16rpx;
		box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.3);
		position: relative;
		overflow: hidden;
	}

	.env-icon {
		font-size: 48rpx;
		margin-right: 24rpx;
	}

	.env-content {
		flex: 1;
	}

	.env-title {
		display: block;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 8rpx;
	}

	.env-value {
		display: block;
		font-size: 40rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.env-badge {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: rgba(255, 255, 255, 0.2);
		color: #ffffff;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-weight: 500;
	}

	/* 图表区域 */
	.chart-section {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}

	.chart-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.chart-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #1a1a1a;
	}

	.chart-period {
		font-size: 24rpx;
		color: #666;
		background: #f3f4f6;
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
	}

	.chart {
		height: 500rpx;
		width: 100%;
	}

	.chart-legend {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		margin-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.legend-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.legend-item.production .legend-dot {
		background: #007AFF;
	}

	.legend-item.non-production .legend-dot {
		background: #34C759;
	}

	.legend-item.auxiliary .legend-dot {
		background: #FF9500;
	}

	.legend-text {
		font-size: 22rpx;
		color: #666;
		font-weight: 500;
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.sub-cards {
			grid-template-columns: 1fr;
			gap: 15rpx;
		}
		
		.container {
			padding: 15rpx;
		}
		
		.main-value {
			font-size: 60rpx;
		}
		
		.env-card {
			flex-direction: column;
			text-align: center;
		}
		
		.env-icon {
			margin-right: 0;
			margin-bottom: 15rpx;
		}
	}
</style>